<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>急救车物资管理系统 - 登录</title>
  <link rel="stylesheet" href="../css/login.css">
  <link rel="stylesheet" href="../lib/fontawesome.min.css">
</head>
<body>
  <div class="main-bg"></div>
  <div class="container">
    <h2>急救车物资管理系统</h2>
    <div id="step1">
      <div class="form-group" style="text-align:center;">
        <label style="font-size:16px;display:block;margin-bottom:18px;">请选择您的身份</label>
        <div class="role-btn-group">
          <button type="button" class="login-btn role-btn manager-btn" data-role="manager">
            <i class="fa-solid fa-warehouse"></i>
            <span>物资管理人员</span>
          </button>
          <button type="button" class="login-btn role-btn doctor-btn" data-role="doctor">
            <i class="fa-solid fa-user-nurse"></i>
            <span>医护人员</span>
          </button>
          <button type="button" class="login-btn role-btn admin-btn" data-role="admin">
            <i class="fa-solid fa-user-shield"></i>
            <span>系统管理员</span>
          </button>
        </div>
      </div>
    </div>
    <form id="loginForm" style="display:none;">
      <button type="button" id="backToRole" class="back-btn"><i class="fa-solid fa-arrow-left"></i> 返回身份选择</button>
      <div class="form-group input-icon-group">
        <label for="username">用户名/邮箱</label>
        <div class="input-wrapper">
          <i class="fa-solid fa-user"></i>
          <input type="text" id="username" name="username" placeholder="请输入用户名或邮箱" autocomplete="username" required>
        </div>
        <div id="usernameError" class="input-error"></div>
      </div>
      <div class="form-group input-icon-group">
        <label for="password">密码</label>
        <div class="input-wrapper">
          <i class="fa-solid fa-lock"></i>
          <input type="password" id="password" name="password" placeholder="请输入密码" autocomplete="current-password" required>
          <span class="toggle-password" id="togglePassword"><i class="fa-solid fa-eye"></i></span>
        </div>
        <div id="passwordError" class="input-error"></div>
      </div>
      <div class="form-group input-icon-group">
        <label for="captcha">验证码</label>
        <div class="captcha-container">
          <div class="input-wrapper">
            <i class="fa-solid fa-shield-alt"></i>
            <input type="text" id="captcha" name="captcha" placeholder="请输入验证码" required>
          </div>
          <canvas id="captchaCanvas" width="120" height="40" style="cursor: pointer;" title="点击刷新验证码"></canvas>
        </div>
        <div id="captchaError" class="input-error"></div>
      </div>
      <div class="options">
        <label><input type="checkbox" id="rememberMe"> 记住我</label>
        <a href="#" id="forgotPassword">忘记密码？</a>
      </div>
      <button type="submit" class="login-btn" id="loginBtn" disabled>登录</button>
      <div id="loginResult" class="login-result"></div>
    </form>
    <div class="signup">没有账号？<a href="#" id="signUp">请联系管理员注册</a></div>
  </div>
  <div class="waves"></div>
  <div class="footer">&copy; 2025 急救车物资管理系统</div>
  <script>
    /**
     * 模拟用户数据 - 登录验证用
     * 包含系统管理员、物资管理人员、医护人员的登录信息
     * 用于演示系统的身份验证和权限控制功能
     */
    window.mockUsers = [
      { 
        username: 'xiangweikun  ',           // 用户名
        password: 'xiangweikun123',          // 密码
        name: '向炜坤',                      // 真实姓名
        role: 'admin',                       // 用户角色：admin-系统管理员
        department: '系统管理部',            // 所属部门
        email: 'xiangweikun@address.com'     // 邮箱地址
      },
      { 
        username: 'hefengchun',              // 用户名
        password: 'hefengchun123',           // 密码
        name: '何逢春',                      // 真实姓名
        role: 'admin',                       // 用户角色：admin-系统管理员
        department: '系统管理部',            // 所属部门
        email: 'hefengchun@address.com'      // 邮箱地址
      },
      { 
        username: 'tangguiping',             // 用户名
        password: 'tangguiping123',          // 密码
        name: '唐贵平',                      // 真实姓名
        role: 'manager',                     // 用户角色：manager-物资管理人员
        department: '物资管理部',            // 所属部门
        email: 'tangguiping@address.com'     // 邮箱地址
      },
      { 
        username: 'xubaoshan',               // 用户名
        password: 'xubaoshan123',            // 密码
        name: '徐宝山',                      // 真实姓名
        role: 'doctor',                      // 用户角色：doctor-医护人员
        department: '急诊科',                // 所属部门
        email: 'xubaoshan@address.com'       // 邮箱地址
      }
    ];
  </script>
  <script src="../js/login.js"></script>
</body>
</html> 